<template>
	<view class="container">
		<view class="bottomBlock">
			<view class="menuList">
				<view class="menuItem">
					<view :class="{itemStyle:itemStyle === 1}" @click="changeStyle(1)">
						<view class="notIcon" v-show="itemStyle !== 1">
							<image src="../../static/image/index.png" style="height: 100%; width: 100%;"></image>
						</view>
						<view class="isIcon" v-show="itemStyle === 1">
							<view class="iconImg">
								<image src="../../static/image/index.png" style="height: 100%; width: 100%;"></image>
							</view>
							<view class="iconStr">
								首页
							</view>
						</view>
					</view>
					<view :class="{itemStyle:itemStyle === 2}" @click="changeStyle(2)">
						<view class="notIcon" v-show="itemStyle !== 2">
							<image src="../../static/image/like.png" style="height: 100%; width: 100%;"></image>
						</view>
						<view class="isIcon" v-show="itemStyle === 2">
							<view class="iconImg">
								<image src="../../static/image/like.png" style="height: 100%; width: 100%;"></image>
							</view>
							<view class="iconStr">
								关心
							</view>
						</view>
					</view>
					<view :class="{itemStyle:itemStyle === 3}" @click="changeStyle(3)">
						<view class="notIcon" v-show="itemStyle !== 3">
							<image src="../../static/image/block.png" style="height: 140%; width: 140%;margin: -20%;"></image>
						</view>
						<view class="isIcon" v-show="itemStyle === 3">
							<view class="iconImg">
								<image src="../../static/image/block.png" style="height: 140%; width: 140%;margin: -20%;"></image>
							</view>
							<view class="iconStr">
								统计
							</view>
						</view>
					</view>
					<view :class="{itemStyle:itemStyle === 4}" @click="changeStyle(4)">
						<view class="notIcon" v-show="itemStyle !== 4">
							<image src="../../static/image/bell.png" style="height: 100%; width: 100%;"></image>
						</view>
						<view class="isIcon" v-show="itemStyle === 4">
							<view class="iconImg">
								<image src="../../static/image/bell.png" style="height: 100%; width: 100%;"></image>
							</view>
							<view class="iconStr">
								我的
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemStyle: 1,
			}
		},
		mounted() {
			
		},
		methods: {
			changeStyle(key){
				this.itemStyle = key
				this.$emit('tabKey',key);
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
		min-height: 100vh;
		position: relative;
	}
	
	.bottomBlock{
		width: 100%;
		height: 140rpx;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
	}
	
	.menuList{
		box-sizing: border-box;
		width: 100%;
		height: 140rpx;
		background-color: rgba(250, 250, 250, 0.5);
		/* border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx; */
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		padding: 14rpx;
	}
	
	.menuItem{
		width: 100%;
		height: 100rpx;
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		/* background-color: rgba(255, 255, 255, 0.5); */
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.menuItem > view{
		flex-shrink: 0;
		width: 25%;
		height: 100rpx;
		border-radius: 25rpx;
		transition-duration: 0.3s;
		transition-timing-function: ease-out;
	}
	
	.itemStyle{
		background-color: rgba(230, 245, 255, 1.0);
		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	
	.notIcon{
		width: 46rpx;
		height: 46rpx;
		margin: 27rpx auto;
		transition-duration: 0.3s;
		transition-timing-function: ease-out;
	}
	
	.isIcon{
		width: 100%;
		height: 100%;
		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	
	.isIcon .iconImg{
		width: 52rpx;
		height: 52rpx;
		margin: 10rpx auto;
		transition-duration: 0.4s;
		transition-timing-function: ease;
	}
	
	.isIcon .iconStr{
		width: 100rpx;
		height: 26rpx;
		margin: auto;
		font-size: 22rpx;
		line-height: 26rpx;
		text-align: center;
		color: rgba(95, 130, 172, 1.0);
	}
</style>
